<template>
  <v-expand-transition>
    <v-sheet
      class="v-application jc-msg"
      v-if="hvisable"
      style="
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        background-color: transparent;
        z-index: 2000;
      "
    >
      <v-alert :type="type" style="width: 100%">
        {{ msg }}
        <template #close>
          <v-btn v-if="duration === 0" icon @click="hide">
            <j-icon size="15">mdi-close-circle</j-icon>
          </v-btn>
        </template>
      </v-alert>
    </v-sheet>
  </v-expand-transition>
</template>

<script>
export default {
  name: "index",
  props: {
    type: {
      type: String,
      default: "success",
    },
    duration: {
      type: Number,
      default: 1000,
    },
    msg: {
      type: String,
      default: "",
    },
    visable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      hvisable: this.visable,
    };
  },
  methods: {
    show() {
      const jcMsgDoms = document.getElementsByClassName("jc-msg");
      if (jcMsgDoms.length > 0) {
        for (let i = 0; i < jcMsgDoms.length; i++) {
          const dom = jcMsgDoms[i];
        }
      }
      this.hvisable = true;
      this.$nextTick(() => {
        if (jcMsgDoms.length > 1) {
          jcMsgDoms[jcMsgDoms.length - 1].style.top = `${(jcMsgDoms.length - 1) * 78 + 10}px`;
        }
      });
      if (this.duration === 0) {
        return;
      }
      setTimeout(this.hide, this.duration);
    },
    hide() {
      this.hvisable = false;
    },
  },
};
</script>

<style scoped></style>
